<!DOCTYPE html>
<html lang="zh-CN" class="transition-all duration-500">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>猫名 - 关于</title>
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script> 
  <style>
    body {
      font-family: 'Microsoft YaHei', sans-serif;
    }
  </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
  <!-- 背景光晕 -->
  <div class="fixed inset-0 z-0 overflow-hidden pointer-events-none">
    <div class="absolute -top-1/4 -left-1/4 w-full h-full rounded-full bg-gradient-to-r from-pink-500/20 via-purple-500/20 to-blue-500/20 blur-3xl animate-pulse"></div>
  </div>

  <div class="container mx-auto px-4 py-10 relative z-10 max-w-md">
    <!-- 导航栏 -->
    <header class="mb-6">
      <nav class="bg-white/80 backdrop-blur-lg shadow-lg rounded-xl p-4 border border-gray-200 dark:border-gray-700 dark:bg-gray-800/80">
        <div class="flex justify-between items-center">
          <a href="./" class="text-2xl font-bold text-indigo-600">猫名</a>
          <div class="flex space-x-4">
            <button onclick="toggleDarkMode()" class="p-2 rounded-full bg-gradient-to-r from-purple-100 to-indigo-100 dark:from-gray-700 dark:to-gray-600 hover:scale-110 transition-transform">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="5"></circle>
                <line x1="12" y1="1" x2="12" y2="3"></line>
                <line x1="12" y1="21" x2="12" y2="23"></line>
                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                <line x1="1" y1="12" x2="3" y2="12"></line>
                <line x1="21" y1="12" x2="23" y2="12"></line>
                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
              </svg>
            </button>
            <button onclick="toggleMobileMenu()" class="md:hidden text-gray-600 dark:text-gray-300">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </div>
        </div>
        <!-- 桌面菜单 -->
        <ul class="hidden md:flex space-x-6 mt-4">
          <li><a href="../zh-cn/" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">返回首页</a></li>
          <li class="relative group">
            <span class="cursor-pointer text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">语言</span>
            <ul class="absolute hidden group-hover:block bg-white shadow-lg rounded-lg py-2 w-40 mt-2 z-20 dark:bg-gray-800">
              <li><a href="../zh-cn/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（中国大陆）</a></li>
              <li><a href="../zh-tw/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（台灣）</a></li>
              <li><a href="../en/" class="block px-4 py-2 text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">English</a></li>
            </ul>
          </li>
          <li><a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" rel="noopener noreferrer" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">项目地址</a></li>
          <li><a href="#" class="text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">关于</a></li>
        </ul>
        <!-- 移动端下拉菜单 -->
        <ul id="mobile-menu" class="hidden mt-4 space-y-2 md:hidden bg-gray-50/80 backdrop-blur-sm rounded-xl p-4 shadow-inner dark:bg-gray-800/50">
          <li><a href="../zh-cn/" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">返回首页</a></li>
          <li>
            <details class="group">
              <summary class="text-gray-700 hover:text-purple-600 cursor-pointer dark:text-gray-300 dark:hover:text-purple-400 flex justify-between items-center">
                <span>语言</span>
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="group-open:rotate-180 transition-transform">
                  <polyline points="6 9 12 15 18 9"></polyline>
                </svg>
              </summary>
              <ul class="ml-4 mt-2 space-y-1">
                <li><a href="../zh-cn/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（中国大陆）</a></li>
                <li><a href="../zh-tw/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">中文（台灣）</a></li>
                <li><a href="../en/" class="block text-sm text-gray-700 hover:bg-purple-100 dark:text-gray-300 dark:hover:bg-purple-900">English</a></li>
              </ul>
            </details>
          </li>
          <li><a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" rel="noopener noreferrer" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">项目地址</a></li>
          <li><a href="#" class="block text-gray-700 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-400">关于</a></li>
        </ul>
      </nav>
    </header>

    <!-- 内容区域 -->
    <main class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-6 dark:bg-gray-800/80">
      <h1 class="text-2xl font-bold mb-4">关于</h1>
      <p class="mb-4">
        一个基于艾琳 · 亨特所著《猫武士》系列小说的族群猫名生成器。本项目最初开源：https://github.com/nminnow/warriors-name-generator，后由  Qinshihuang233 更新并维护。
      </p>
      <p class="mb-4">
        数据来源于：<a href="https://crystalpool.cxuesong.com/"  class="text-blue-500 hover:underline">水晶池</a>，本页面最后更新时间：<span id="lastUpdated"></span>
      </p>
      <p>
        当前版本代码托管在：<a href="https://gitlab.com/Qinshihuang233/warriors-name"  target="_blank" class="text-blue-500 hover:underline">GitLab 仓库</a>
      </p>
    </main>

    <!-- 底部版权 -->
    <footer class="mt-6 text-center text-sm text-gray-600 dark:text-gray-400">
      <p>© 2025 猫名 - 开源猫武士起名器</p>
    </footer>
  </div>

  <!-- JS 功能 -->
  <script>
    function toggleDarkMode() {
      const isDark = !document.documentElement.classList.contains('dark');
      document.documentElement.classList.toggle('dark', isDark);
      localStorage.setItem('darkMode', isDark);
    }

    function toggleMobileMenu() {
      const menu = document.getElementById("mobile-menu");
      menu.classList.toggle("hidden");
    }

    // 设置最后更新时间
    document.addEventListener('DOMContentLoaded', () => {
      const lastUpdated = new Date(document.lastModified).toLocaleString();
      document.getElementById('lastUpdated').textContent = lastUpdated;

      const savedDarkMode = localStorage.getItem('darkMode') === 'true';
      document.documentElement.classList.toggle('dark', savedDarkMode);
    });
  </script>
</body>
</html>